<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-table  bordered :rowKey="(record, index) => {
        return index;
      }
      " :columns="columns" :data-source="data">
      <span slot="icon" slot-scope="icon">
        <img :src="icon" />
      </span>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm title="确定要解除绑定吗?" ok-text="确定" cancel-text="放弃" @confirm="delApp(record)" @cancel="cancel"
          v-if="record.create_time">
          <a-button type="primary"> 解除绑定 </a-button>
        </a-popconfirm>

        <a-button type="primary" @click="bindApp(record)" v-else>
          绑定账号
        </a-button>
        <!-- <a @click="bindApp(record)" v-if="record.userId == null">绑定账号</a>
        <a-divider v-if="record.userId == null" type="vertical" />

        <a-popconfirm
          title="确定要解除绑定吗?"
          ok-text="确定"
          cancel-text="放弃"
          @confirm="confirm(record)"
          @cancel="cancel"
        >
          <a v-if="record.userId != null">解除绑定</a>
        </a-popconfirm> -->
      </span>
    </a-table>
    <a-modal v-model="visible" title="添加" :footer="null">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="AppKey" label="AppKey" prop="AppKey">
          <a-input v-model="form.AppKey" @blur="() => {
              $refs.AppKey.onFieldBlur();
            }
            " />
        </a-form-model-item>
        <a-form-model-item ref="AppSecret" label="AppSecret" prop="AppSecret">
          <a-input v-model="form.AppSecret" @blur="() => {
              $refs.AppSecret.onFieldBlur();
            }
            " />
        </a-form-model-item>

        <a-form-model-item ref="dingtalk_user_id" label="会议发起人userId" prop="dingtalk_user_id">
          <a-input v-model="form.dingtalk_user_id" @blur="() => {
              $refs.dingtalk_user_id.onFieldBlur();
            }
            " />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit"> 提交 </a-button>
          <a-button style="margin-left: 10px" @click="resetForm">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "应用图标",
    dataIndex: "adhibition_icon",
    key: "adhibition_icon",
    scopedSlots: { customRender: "icon" },
  },
  {
    title: "应用id",
    dataIndex: "adhibition_id",
  },
  {
    title: "应用名称",
    dataIndex: "adhibition_name",
  },
  {
    title: "应用code",
    dataIndex: "adhibition_code",
  },
  {
    title: "綁定时间",
    dataIndex: "create_time",
  },
  {
    title: "AppKey",
    dataIndex: "AppKey",
  },
  {
    title: "AppSercet",
    dataIndex: "AppSecret",
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

import application from "../../api/application";
export default {
  data() {
    return {
      endOpen: false,
      data: [],
      columns,
      selectedRowKeys: [], // 选中此处以配置默认列
      loading: false,
      loading1: false,
      visible: false,
      loading2: true,
      labelCol: { span: 8 },
      wrapperCol: { span: 10 },
      other: "",
      form: {
        AppKey: "",
        AppSecret: "",
        dingtalk_user_id: "",
      },
      rules: {
        AppKey: [{ required: true, message: "不能为空", trigger: "blur" }],
        AppSecret: [{ required: true, message: "不能为空", trigger: "blur" }],
        dingtalk_user_id: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      adhibition_id: "",
      adhibition_code: "",
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  mounted() {
    this.init();
  },
  watch: {},
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let id = localStorage.getItem("loginuserId");
          let data = {
            create_user_id: id,
            create_time: this.getNowDate(),
            AppSecret: this.form.AppSecret,
            edit_time: this.getNowDate(),
            AppKey: this.form.AppKey,
            dingtalk_user_id: this.form.dingtalk_user_id,
            fk_adhibition_id: this.adhibition_id,
            adhibition_user_id:
              this.adhibition_code + "-" + this.adhibition_id + "-" + id,
          };
          application.biind(data).then((res) => {
            if (res.data.errcode == 0) {
              this.$message.success("操作成功");
              this.visible = false;
              this.init();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    delApp(val) {
      let data = {
        adhibition_user_id: val.adhibition_user_id,
      };
      application.unbiind(data).then((res) => {
        if (res.data.errcode == 0) {
          this.$message.success("操作成功");
          this.init();
        }
      });
    },
    // adhibition_user_id:"dingding-dingding-1"
    confirm(e) {
      this.deleteApp(e);
    },
    cancel(e) {
      console.log(e);
    },
    deleteApp(val) {
      let ids = val.id;
      let id = localStorage.getItem("loginuserId");
      let data = {
        create_user_id: id,
        create_time: this.getNowDate(),
      };
      application.biind(ids).then((res) => {
        if (res.data.code == 0) {
          this.$message.success("操作成功");
          this.visible = false;
          this.init();
        }
      });
    },
    getNowDate() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds(); //秒
      var weekArr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds
      );
    },
    bindApp(val) {
      this.adhibition_id = val.adhibition_id;
      this.adhibition_code = val.adhibition_code;
      this.visible = true;
    },
    async init() {
      let arr = [];
      let dataValue = [];
      let res = await application.getEmLists();
      if (res.data.errcode == 0) {
        arr = res.data.rows;
        dataValue = res.data.rows;
      }

      let arr2 = [];
      let id = localStorage.getItem("loginuserId");
      let param = "%7Bcreate_user_id%3A" + id + "%7D";
      let res2 = await application.getLists(param);

      if (res2.data.errcode == 0) {
        arr2 = res2.data.rows;
      }

      for (let index = 0; index < arr.length; index++) {
        for (let index2 = 0; index2 < arr2.length; index2++) {
          if (arr[index].adhibition_id == arr2[index2].fk_adhibition_id) {
            dataValue[index].create_time = arr2[index2].create_time;
            dataValue[index].AppKey = arr2[index2].AppKey;
            dataValue[index].AppSecret = arr2[index2].AppSecret;
          }
        }
      }

      this.data = dataValue;
      this.loading2 = false;
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

<style scoped>
.ant-table-wrapper {
  background: #fff;
}
</style>
